<div id="page-shade" style="display: none; top: 0px;"></div> 
<div class="pop-box" id="add-address-pop">
    <div class="row memberpwd-margin">
		<div class="col-xs-12 text-center">
			收货地址
			<img alt="关闭" src="${webRoot!}/img/mobile/close.png" onclick="Address.closeAddAddressPopOpenListPop()" class="pop-close"/>
		</div>
	</div>
	<div class="member-hr-line common-small-line-margin"></div>
	<div class="row memberpwd-margin">
		<div class="col-xs-4 receive-div text-center">
			<font class="tip-red">*</font>收货人
		</div>
		<div class="col-xs-8 receive-div text-left">
			<input type="hidden" id="addressId" name="addressId" />
			<input type="hidden" id="id" value="${memberAddress.maId!}">
			<input type="text" placeholder="请输入收货人名" id="name" maxlength="50" class="addr-txt-style no-border" value="${memberAddress.maName!}"/><br>
			<span class="tip-red" id="nameSpan"></span>
		</div>
	</div>
	<div class="member-hr-line common-small-line-margin"></div>
	<div class="row memberpwd-margin">
		<div class="col-xs-4 receive-div text-center" >
			<font class="tip-red">*</font>手机号码
		</div>
		<div class="col-xs-8 receive-div text-left">
			<input type="text" placeholder="请输入手机号码" id="mobile" maxlength="20" class="addr-txt-style no-border" value="${memberAddress.maMobile!}"/><br>
			<span class="tip-red" id="mobileSpan"></span>
		</div>
	</div>
	<div class="member-hr-line common-small-line-margin"></div>
	<div class="row memberpwd-margin" id="cityDiv">
		<div class="col-xs-4 receive-div text-center" >
			<font class="tip-red">*</font>选择地区
		</div>
		<div class="col-xs-8 receive-div text-left">
			<input type="text" placeholder="请选择地区" name="sel_city" id="sel_city" readonly="readonly" maxlength="255" class="addr-txt-style no-border" value="${memberAddress.maCity}"/><br>
			<span class="tip-red" id="citySpan"></span>
		</div>
	</div>
	<div class="member-hr-line common-small-line-margin" id="cityDivLine"></div>
	<div class="row memberpwd-margin">
		<div class="col-xs-4 receive-div text-center" >
			<font class="tip-red">*</font>详细地址
		</div>
		<div class="col-xs-8 receive-div text-left">
			<input type="text" placeholder="详细地址，例如**街道**号" id="address" maxlength="200" class="addr-txt-style no-border" value="${memberAddress.maAddress!}"/><br>
			<span class="tip-red" id="addressSpan"></span>
		</div>
	</div>
	<div class="member-hr-line common-small-line-margin"></div>
	<div class="row memberpwd-margin">
		<div class="col-xs-4 receive-div text-center" >
			邮政编码
		</div>
		<div class="col-xs-8 receive-div text-left">
			<input type="text" placeholder="请输入邮政编码" id="postCode" maxlength="10" class="addr-txt-style no-border" value="${memberAddress.maPostCode!}"/>
		</div>
	</div>
	<div class="member-hr-line common-small-line-margin"></div>
	<div class="row">
		<div class="col-xs-12 col-no-padding" onclick="Address.updateAddress()">
			<div class="save-button buynow text-center" title="新建地址"><span>保存</span></div>
		</div>
	</div>
</div>


<!-- 地址选择 -->
<div class="picker" style="display: none; z-index: 299999;">
  <div class="picker-panel panel-hook">
	    <div class="picker-choose choose-hook">
		      <span class="cancel cancel-hook">取消</span>
		      <span class="confirm confirm-hook">确定</span>
		      <h1 class="picker-title">地址选择</h1>
	    </div>
	    <div class="picker-content">
	      <div class="wheel-wrapper wheel-wrapper-hook">
	          <div class="wheel wheel-hook">
		            <ul class="wheel-scroll wheel-scroll-hook" style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, -180px) translateZ(0px);">
		            </ul>
	          </div>
	        
	          <div class="wheel wheel-hook">
	            	<ul class="wheel-scroll wheel-scroll-hook" style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, -36px) translateZ(0px);">
					</ul>
	          </div>
	        
	          <div class="wheel wheel-hook">
	            	<ul class="wheel-scroll wheel-scroll-hook" style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, -180px) translateZ(0px);">
						</ul>
		          </div>
		      </div>
	    	</div>
	  </div>
</div>

<script type="text/javascript">
	$(function(){
		var nameEl = document.getElementById('sel_city');
		
		var first = []; /* 省，直辖市 */
		var second = []; /* 市 */
		var third = []; /* 镇 */
		
		var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */
		
		var checked = [0, 0, 0]; /* 已选选项 */
		
		function creatList(obj, list){
		  obj.forEach(function(item, index, arr){
		  var temp = new Object();
		  temp.text = item.name;
		  temp.value = index;
		  list.push(temp);
		  })
		}
		
		creatList(city, first);
		
		if (city[selectedIndex[0]].hasOwnProperty('sub')) {
		  creatList(city[selectedIndex[0]].sub, second);
		} else {
		  second = [{text: '', value: 0}];
		}
		
		if (city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
		  creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
		} else {
		  third = [{text: '', value: 0}];
		}
		
		var picker = new Picker({
		    data: [first, second, third],
		  selectedIndex: selectedIndex,
		    title: '地址选择'
		});
		
		picker.on('picker.select', function (selectedVal, selectedIndex) {
			    var text1 = first[selectedIndex[0]].text;
			  	var text2 = second[selectedIndex[1]].text;
				var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';
			    nameEl.value = text1 + ' ' + text2 + ' ' + text3;
			    Address.showAddressPop();
		});
		
		picker.on('picker.change', function (index, selectedIndex) {
		  if (index === 0){
		    firstChange();
		  } else if (index === 1) {
		    secondChange();
		  }
		
		  function firstChange() {
		    second = [];
		    third = [];
		    checked[0] = selectedIndex;
		    var firstCity = city[selectedIndex];
		    if (firstCity.hasOwnProperty('sub')) {
		      creatList(firstCity.sub, second);
		
		      var secondCity = city[selectedIndex].sub[0]
		      if (secondCity.hasOwnProperty('sub')) {
		        creatList(secondCity.sub, third);
		      } else {
		        third = [{text: '', value: 0}];
		        checked[2] = 0;
		      }
		    } else {
		      second = [{text: '', value: 0}];
		      third = [{text: '', value: 0}];
		      checked[1] = 0;
		      checked[2] = 0;
		    }
		
		    picker.refillColumn(1, second);
		    picker.refillColumn(2, third);
		    picker.scrollColumn(1, 0)
		    picker.scrollColumn(2, 0)
		  }
		
		  function secondChange() {
		    third = [];
		    checked[1] = selectedIndex;
		    var first_index = checked[0];
		    if (city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
		      var secondCity = city[first_index].sub[selectedIndex];
		      creatList(secondCity.sub, third);
		      picker.refillColumn(2, third);
		      picker.scrollColumn(2, 0)
		    } else {
		      third = [{text: '', value: 0}];
		      checked[2] = 0;
		      picker.refillColumn(2, third);
		      picker.scrollColumn(2, 0)
		    }
		  }
		
		});
		
		picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
		  console.log(selectedVal);
		  console.log(selectedIndex);
		});
		
		nameEl.addEventListener('click', function () {
			Address.closeAddAddressPop();
			Address.closeAddressListPop();
		    picker.show();
		});
   });
</script>